import { Table, Divider, Tag, Space, Modal, Spin } from "antd";
import {
  CheckCircleTwoTone,
  HeartTwoTone,
  ExclamationCircleFilled,
} from "@ant-design/icons";
import { useState, useEffect } from "react";
import { Typography } from "antd";
import { Button } from "antd";
import { useHandRouterChange } from "@/hooks/useHandRouterChange";
import { api } from "../../../api";

const { Title } = Typography;
const { confirm } = Modal;
const Trash = () => {
  const [tableData, setTableData] = useState([]);
  const [selectedKeys, setSelectedKeys] = useState([]);
  const columns = [
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "是否发布",
      dataIndex: "isPublished",
      key: "isPublished",
      render: (isPublished: boolean) => (
        <Tag color={isPublished ? "green" : "red"}>
          {isPublished ? "已发布" : "未发布"}
        </Tag>
      ),
    },
    {
      title: "答卷",
      dataIndex: "include",
      key: "include",
    },
    {
      title: "是否收藏",
      dataIndex: "isStar",
      key: "isStar",
      render: (isStar: boolean) => (
        <HeartTwoTone twoToneColor={isStar ? "#eb2f96" : "gray"} />
      ),
    },
    {
      title: "创建时间",
      dataIndex: "time",
      key: "time",
    },
  ];
  const { data, loading } = useHandRouterChange(
    api.questionnaire.getQuestionnaireTrash,
    "kayWord",
  );
  useEffect(() => {
    setTableData(data);
  }, [data]);

  const showConfirm = () => {
    confirm({
      title: "彻底删除",
      icon: <ExclamationCircleFilled />,
      content: "删除后将无法恢复，确认删除",
      onOk() {},
      onCancel() {
        console.log("Cancel");
      },
    });
  };
  //获取列表数据
  const getList = async () => {
    const res = await api.questionnaire.getQuestionnaireTrash();
    console.log("获取问卷列表", res);
    setTableData(res.data);
  };
  // 处理恢复
  const handRecover = async () => {
    const items = selectedKeys.join(",");
    console.log("恢复问卷", items);
    const res = await api.questionnaire.putRecoverQuestionnaire({ ids: items });
    console.log("恢复问卷结果", res);
    getList();
  };
  return (
    <div>
      <Title level={3}>回收站</Title>
      <Space>
        <Button onClick={handRecover}>恢复</Button>
        <Button type="primary" onClick={showConfirm}>
          批量删除
        </Button>
      </Space>
      <Spin spinning={loading}>
        <Table
          columns={columns}
          dataSource={tableData}
          rowKey={(q) => q.id}
          rowSelection={{
            type: "checkbox",
            onChange: (selectedRowKeys: React.Key[], selectedRows) => {
              console.log(
                `selectedRowKeys: ${selectedRowKeys}`,
                "selectedRows: ",
                selectedRows,
              );
              setSelectedKeys(selectedRowKeys);
            },
          }}
        />
      </Spin>
    </div>
  );
};
export default Trash;
